<!--分类管理页面-->
<template>
  <div>
    <navigation v-on:search="search($event)"></navigation>


    <el-row class="row">

      <el-col style="margin-bottom: 30px;" :sm="{span:24}" :xl="{span:14,offset:5}" :lg="{span:18,offset:3}" :md="{span:18,offset:3}">
        <div style="height: 60px;">
          <div style="float: left; margin-top: 20px;">
            <span style="font-weight: bold;">分类管理</span>
          </div>
          <div style="float: right; margin-top: 20px;">
            <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="openAddDialog()">新增</el-button>
          </div>
          <div style="clear: both"></div>
          <el-divider></el-divider>
        </div>
      </el-col>

      <el-col v-for="category in list" :sm="{span:24}" :xl="{span:14,offset:5}" :lg="{span:18,offset:3}" :md="{span:18,offset:3}">
        <el-card shadow="hover">
          <div class="title">
            {{ category.name }}
          </div>

          <div class="opt">
            <!--            <el-button type="primary" size="mini" icon="el-icon-s-management" @click="contentList(category.categoryId)" circle>管理</el-button>-->
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(category)" circle/>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(category.categoryId)" circle/>
          </div>

          <div style="clear: both"></div>
        </el-card>
      </el-col>
    </el-row>

    <!--  添加分类弹框-->
    <el-dialog
      title="新增分类"
      :visible.sync="showAddDialog"
      :width="width">
      <el-row class="row">
        <el-col style="margin-top:10px;" :xs="{span:24}" :md="{span:3,offset:2}">名称：</el-col>
        <el-col :xs="{span:24}" :md="{span:17,offset:2}">
          <el-input v-model="name" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>

      <el-row class="row">
        <el-col style="margin-top:10px;" :xs="{span:24}" :md="{span:3,offset:2}">简介：</el-col>
        <el-col :xs="{span:24}" :md="{span:17,offset:2}">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="content">
          </el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
      <el-button @click="showAddDialog = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submit()">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import Navigation from "../components/Navigation";
import axios from 'axios'
import qs from "qs";
import global from "../components/Common"

export default {
  components: {
    "navigation": Navigation
  },
  data() {
    return {
      showAddDialog: false,
      name: '',
      content: '',
      categoryId: '',
      list: [],
      loading: false,
      width: ''
    }
  },
  mounted() {
    this.width = global.isMobile ? '90%' : '50%';

    this.initList();
  },
  methods: {
    del(id) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("/api/category/delete?categoryId=" + id).then(res => {
          if (res.data.code === 200) {
            this.$message.success("删除成功！");
            this.initList();
          } else {
            this.$message.warning(this.data.msg);
          }
        })
      })
    },
    edit(category) {
      console.log(category)
      this.showAddDialog = true;
      this.name = category.name;
      this.content = category.content;
      this.categoryId = category.categoryId;
    },
    contentList() {

    },
    initList() {
      axios.get("/api/category/list").then((res) => {
        if (res.data.code === 200) {
          this.list = res.data.data;
        } else {
          this.$message.error("服务器繁忙，请稍后重试！");
        }
      })
    },
    openAddDialog() {
      this.showAddDialog = true;
      this.name = '';
      this.content = '';
      this.categoryId = '';
    },
    submit() {
      console.info(this.name);
      this.loading = true;
      if (!this.name || this.name.trim().length === 0) {
        this.$message.warning("名称不能为空！");
        this.loading = false;
        return;
      }

      if (!this.content || this.content.trim().length === 0) {
        this.$message.warning("简介不能为空！");
        this.loading = false;
        return;
      }
      axios.post("/api/category/add",
        qs.stringify({
          name: this.name.trim(),
          content: this.content.trim(),
          id: this.categoryId
        })).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("保存成功！");
          this.showAddDialog = false;
          this.initList();
        } else {
          this.$message.error(res.data.msg)
        }
        this.loading = false;
      }).catch(() => {
        this.$message.error("保存失败，请重试！");
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  float: left;
}

.opt {
  float: right;
}

.secondTitle {
  font-size: 1rem;
  margin-bottom: 10px;
  margin-left: 15px;
}

.createDate {
  float: right;
}

.nickname, .createDate {
  font-size: 0.75rem;
  color: darkgray;
}

.row {
  margin-top: 10px;
}
</style>
